<template>
  <div class="realMonitor">
    <div class="realMonitor-list" v-show="chooseWay == 0">
      <div class="realMoniter-left">
        <div class="left-top">进行中的业务({{ taskNum }})</div>
        <div
          class="left-data"
          v-for="(ele, i) in info"
          :key="i"
          @click="chooseFun(i)"
        >
          <div class="left-data-template" :class="choose == i ? 'choosed' : ''">
            <div class="left-data-template-headImg">
              <i class="el-icon-user"></i>
            </div>
            <div class="left-data-template-info">
              <p>
                <span>{{ ele.title }}</span>
                <span>{{ ele.state }}</span>
              </p>
              <p>业务负责人:{{ ele.name }}</p>
              <p>联系方式:{{ ele.contact }}</p>
            </div>
            <div class="left-data-template-stoke">
              <p>行程总数</p>
              <p>{{ ele.stoke }}</p>
            </div>
            <div class="left-data-template-carNum">
              <p>车辆总数</p>
              <p>{{ ele.carNum }}</p>
            </div>
            <div class="left-data-template-deviceNum">
              <p>设备总数</p>
              <p>{{ ele.deviceNum }}</p>
            </div>
            <div class="left-data-template-total">
              <p>超限总数</p>
              <p style="color: red">{{ ele.total }}</p>
            </div>
          </div>

          <div class="left-proce" v-for="(_ele, _i) in ele.proce" :key="_i" v-show="i==choose">
     
            <div class="left-proce-allData">
              <p>
                <span>[{{ ele.title }}]</span>
                <span>{{ _ele.state }}</span>
              </p>
              <div class="left-proce-allData-data">
                <div>
                  <p>车辆总数</p>
                  <p>{{ _ele.carNum }}</p>
                </div>
                <div>
                  <p>设备总数</p>
                  <p>{{ _ele.deviceNum }}</p>
                </div>
                <div>
                  <p>超限总数</p>
                  <p>{{ _ele.overedNum }}</p>
                </div>
              </div>
              <p>起始地:{{ _ele.startPlace }}</p>
              <p>目的地:{{ _ele.endPlace }}</p>
            </div>
            <div class="left-proce-list">
              <div
                class="detail-template"
                v-for="(__ele, __i) in _ele.carInfoVos"
                :key="__i"
              >
                <img src="@/assets/main/car.png" />
                <div class="detail-template-info">
                  <p style="color:#000,font-weight: bold;">
                    {{ __ele.name }}的车
                  </p>
                  <p>运输人员: {{ __ele.name }}</p>
                  <p>联系方式: {{ __ele.mobile }}</p>
                  <p>设备号: {{ __ele.deviceNum }}</p>
                  <p>
                    超限数:
                    <span style="color: red">{{ _ele.overedNum }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- <ColumnText title="asdas" :num="2" color="red" :fontSize=".3" /> -->
      </div>
      <div class="realMoniter-right">
        <div class="right-top">
          <span>超限时间</span>
          <span
            @click="rightChoose = 1"
            :class="rightChoose == 1 ? 'isChoose' : ''"
            >时间</span
          >
          <span
            @click="rightChoose = 2"
            :class="rightChoose == 2 ? 'isChoose' : ''"
            >级别</span
          >
        </div>
        <div class="right-bottom">
          <div
            class="right-bottom-template"
            v-for="(ele, i) in rightBottm"
            :key="i"
            @click="onclick(ele)"
          >
            <p>{{ ele.remark }}</p>
            <p>出发地:{{ ele.startPlace }}</p>
            <p>目的地:{{ ele.endPlace }}</p>
            <p>运输人员:{{ ele.transpeople1 }}</p>
            <p>预警时间:{{ ele.limitdatatime | filterTime }}</p>
            <p>预警地址:{{ ele.limitAddress }}</p>
            <p>预警情况:</p>
            <p style="color: red; font-size: 0.14rem; font-weight: bold">
              振动加速度   （max）:{{ ele.limitValue }}
            </p>
            <el-button round style="margin-top:12px" >查看地图</el-button>
          </div>
          <div
          class="el-icon-loading"
            :class="loading ? 'el-icon-loading' : 'load-more'"
            @click="loadingFun()"
            v-text="!loading ? '加载更多' : ''"
          ></div>
        </div>
      </div>
    </div>
    <div class="realMonitor-map" v-show="chooseWay == 1">
      <div id="container"></div>
    </div>
    <div class="realMonitor-control" v-show="chooseWay == 2">
      <div class="realMonitor-control-left">
        <div class="left-top">
          <p>在线设备</p>
          <p>实在线:215</p>
          <p>应在线:210</p>
        </div>
        <div class="left-list">
          <div
            class="left-list-template"
            style="word-wrap:break-word;"
            v-for="(ele, i) in controlLeft"
            :key="i"
          >
            <p >{{ ele.name }}</p>
            <p>设备id: {{ ele.id }}</p>
            <p>上线时间: {{ ele.onlineTime | filterTime }}</p>
          </div>
           <div
            
             :class="!consoleLoading ? 'el-icon-loading' : 'load-more'"
            @click="getConsole(true)"
            v-text="consoleLoading ? '加载更多' : ''"
          ></div>
        </div>
       
      </div>
      <div class="realMonitor-control-right">
        <div class="right-top">传输数据</div>
        <div class="right-list">
          <div class="right-list-table">
            <p>设备编号</p>
            <p>传输时间</p>
            <p>X轴震动值</p>
            <p>Y轴震动值</p>
            <p>Z轴震动值</p>
            <p>合成加速度</p>
            <p>地点</p>
          </div>
          <div
            class="right-list-template"
            style="word-wrap:break-word;"
            v-for="(ele, i) in controlRight"
            :key="i"
          >
            <p>{{ ele.id }}</p>
            <p>{{ ele.datatime | filterTime }}</p>
            <p>{{ ele.x }}</p>
            <p>{{ ele.y }}</p>
            <p>{{ ele.z }}</p>
            <p>{{ ele.x + ele.y +ele.z }}</p>
            <p>{{ ele.adress }}</p>
          </div>
        </div>
         <div
            :class="!consoleLoading ? 'el-icon-loading' : 'load-more'"
            @click="getConsole(true)"
            v-text="consoleLoading ? '加载更多' : ''"
          ></div>
      </div>
    </div>
    <div class="realMoniter-bottom">
      <div
        :class="chooseWay == i ? 'realMoniter-bottom-template' : ''"
        v-for="(ele, i) in wayList"
        :key="i"
      >
        <p @click="bottomClick(i)">
          {{ ele }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import ColumnText from "../../components/columnText";
export default {
  data() {
    return {
      loading: true,
      taskNum: 5,
      rightChoose: 1,
      info: [
        {
          title: "运输业务自定义名称",
          name: "徐小明",
          contact: "1366878766",
          state: "进行中",
          stoke: 2,
          carNum: 10,
          deviceNum: 15,
          total: 27,
        },
      ],
      proce: [
        {
          title: "成都-长沙",
          state: "进行中",
          carNum: 4,
          deviceNum: 15,
          total: 19,
          startAdress: "成都市武侯区",
          endAdress: "长沙市新华北路",
          detail: [
            {
              state: "进行中",
              name: "某某",
              iphone: "13863258725",
              deviceNum: 2,
              total: 5,
            },
            {
              state: "进行中",
              name: "某某2",
              iphone: "13863258725",
              deviceNum: 2,
              total: 5,
            },
            {
              state: "进行中",
              name: "某某3",
              iphone: "13863258725",
              deviceNum: 2,
              total: 5,
            },
            {
              state: "进行中",
              name: "某某",
              iphone: "13863258725",
              deviceNum: 2,
              total: 5,
            },
            {
              state: "进行中",
              name: "某某",
              iphone: "13863258725",
              deviceNum: 2,
              total: 5,
            },
          ],
        },
        {
          title: "成都-长沙",
          state: "进行中",
          carNum: 4,
          deviceNum: 15,
          total: 19,
          startAdress: "成都市武侯区",
          endAdress: "长沙市新华北路",
          detail: [
            {
              state: "进行中",
              name: "某某",
              iphone: "13863258725",
              deviceNum: 2,
              total: 5,
            },
            {
              state: "进行中",
              name: "某某2",
              iphone: "13863258725",
              deviceNum: 2,
              total: 5,
            },
            {
              state: "进行中",
              name: "某某3",
              iphone: "13863258725",
              deviceNum: 2,
              total: 5,
            },
            {
              state: "进行中",
              name: "某某",
              iphone: "13863258725",
              deviceNum: 2,
              total: 5,
            },
            {
              state: "进行中",
              name: "某某",
              iphone: "13863258725",
              deviceNum: 2,
              total: 5,
            },
          ],
        },
      ],
      costom: [
        {
          state: "进行中",
          title: "运输业务自定义名称",
          name: "徐小明",
          phone: "13652365412",
          stroke: 2,
          carNum: 10,
          deviceNum: 15,
          total: 20,
        },
      ],
      message: [
        { title: "公司运输业务一[成都-长沙]" },
        { startAdress: "公司运输业务一[成都-长沙]" },
        { title: "公司运输业务一[成都-长沙]" },
        { title: "公司运输业务一[成都-长沙]" },
        { title: "公司运输业务一[成都-长沙]" },
      ],
      rightBottm: [
        {
          title: "公司运输业务一【成都-长沙】",
          startAdress: "出发地：成都市武侯区金科北路32号",
          endAdress: "目的地：长沙市武昌县科技南路二段135号",
          name: "某欧",
          phont: "123848273",
          warnTime: "预警时间：2018-04-04 13:30:25",
          warnAdress: "预警地址：四川省成都市金堂县十里大道1段-703-、705号",
          warnSensor: "振动加速度   A（max）：0.12g",
          vibrationAccele: 0.12,
        },
        {
          title: "公司运输业务一【成都-长沙】",
          startAdress: "出发地：成都市武侯区金科北路32号",
          endAdress: "目的地：长沙市武昌县科技南路二段135号",
          name: "某欧",
          phont: "123848273",
          warnTime: "预警时间：2018-04-04 13:30:25",
          warnAdress: "预警地址：四川省成都市金堂县十里大道1段-703-、705号",
          warnSensor: "振动加速度   A（max）：0.12g",
          vibrationAccele: 0.12,
        },
        {
          title: "公司运输业务一【成都-长沙】",
          startAdress: "出发地：成都市武侯区金科北路32号",
          endAdress: "目的地：长沙市武昌县科技南路二段135号",
          name: "某欧",
          phont: "123848273",
          warnTime: "预警时间：2018-04-04 13:30:25",
          warnAdress: "预警地址：四川省成都市金堂县十里大道1段-703-、705号",
          warnSensor: "振动加速度   A（max）：0.12g",
          vibrationAccele: 0.12,
        },
        {
          title: "公司运输业务一【成都-长沙】",
          startAdress: "出发地：成都市武侯区金科北路32号",
          endAdress: "目的地：长沙市武昌县科技南路二段135号",
          name: "某欧",
          phont: "123848273",
          warnTime: "预警时间：2018-04-04 13:30:25",
          warnAdress: "预警地址：四川省成都市金堂县十里大道1段-703-、705号",
          warnSensor: "振动加速度   A（max）：0.12g",
          vibrationAccele: 0.12,
        },
      ],
      wayList: ["列表", "地图", "控制台"],
      chooseWay: 0,
      controlLeft: [
      ],
      controlRight: [
        
      ],
      lng: "",
      lat: "",
      map: "",
      choose: 0,
      rightBottmPage: 1,
      consoleNum:1,
      consoleLoading:true
    };
  },
  components: {
    ColumnText,
  },
  methods: {
    loadingFun() {
      if (!this.loading) {
        this.loading = true;
        this.rightBottmPage++;
        this.getOver(this.info[this.choose].id);
      }
    },
    chooseFun(i) {
      this.choose = i;
      this.getOver(this.info[i].id);
    },
    onclick(i) {
      this.axios("get",this.inter.getLookMap+i.businessId).then(res=>{
        console.log(res);
      })
      // this.$router.push({
      //   name: "/main/second",
      //   params: {
      //     data: i,
      //     title: ["实时监控", "车辆详情"],
      //     nextTitle: "实时监控",
      //   },
      // });
    },
    bottomClick(i) {
      this.chooseWay = i;
      if (i == 1 && this.lng != "" && this.lat != "") {
        this.map.setCenter([this.lng, this.lat]);
      }

      if(this.chooseWay == 2){
        this.getConsole()
      }
    },
    getOver(id) {
      this.axios("get", this.inter.getBusinessOver + id, {
        pageNum: this.rightBottmPage,
        pageSize: 10,
        type: 1,
      }).then((res) => {
        console.log(res);
        this.loading = false;
        if (this.rightBottmPage == 1) {
          this.rightBottm = res.list;
        } else {
          res.list.filter((item) => {
            this.rightBottm.push(item);
          });
        }
      });
    },
    getData() {
      this.axios("get", this.inter.getBusinessPage, {
        pageNum: 1,
        pageSize: 10,
        status: 1,
      }).then((res) => {
        // console.log(res);
        this.rightBottm = [];
        this.info = [];
        res.list.filter((item) => {
          this.info.push({
            id: item.id,
            title: item.name,
            contact: item.mobile,
            stoke: item.itineraryNum,
            carNum: item.carNum,
            deviceNum: item.deviceNum,
            total: item.overedNum,
            // "rightBottm":item.itineraryInfoVos
            proce: item.itineraryInfoVos,
          });
          this.rightBottmPage = 1;
          this.getOver(this.info[this.choose].id);
          // this.rightBottm.push({ title: "公司运输业务一【成都-长沙】",
          // startAdress: "出发地：成都市武侯区金科北路32号",
          // endAdress: "目的地：长沙市武昌县科技南路二段135号",
          // id:item.id,
          // deviceName:item.deviceName,
          // name: "某欧",
          // phont: "123848273",
          // warnTime: "预警时间：2018-04-04 13:30:25",
          // warnAdress: "预警地址：四川省成都市金堂县十里大道1段-703-、705号",
          // warnSensor: "振动加速度   A（max）：0.12g",
          // vibrationAccele: 0.12,})
        });
      });
    },
    getConsole(page){
      if(page){
        this.consoleNum++
      }
      this.consoleLoading = false;
        this.axios("get",this.inter.getConsole,{
          pageNum:this.consoleNum,
          pageSize :30
        }).then(res=>{
          this.controlLeft = res.devices
          this.consoleLoading = true;
          if(this.consoleNum!=1){
            res.datas.list.filter(item=>{
              this.controlRight.push(item)
            })
          }else{
            this.controlRight = res.datas.list
          }
          // this.
        })
    }
  },
  mounted() {
    AMapLoader.load({
      key: "	9876054b69cb3e046d8e4eea79a730a9", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        version: "1.1", // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
      Loca: {
        version: "1.3.2", // Loca 版本，缺省 1.3.2
      },
    })
      .then((AMap) => {
        let that = this;
        this.map = new AMap.Map("container");
        AMap.plugin("AMap.Geolocation", function () {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(10, 20),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            buttonPosition: "RB",
          });
          geolocation.getCurrentPosition((status, result) => {
            if (status == "complete") {
              onComplete(result);
            } else {
              onError(result);
            }
          });
          that.map.addControl(geolocation);
          function onComplete(data) {
            // data是具体的定位信息
            // console.log(data.position);
            // console.log(that.map);
            that.lng = data.position.lng;
            that.lat = data.position.lat;
            that.map.setCenter([data.position.lng, data.position.lat]);
          }

          function onError(data) {
            // 定位出错
          }
        });
      })
      .catch((e) => {
        console.log(e);
      });
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.realMonitor {
  
  .load-more {
    padding: 0.2rem;
    background: #fff;
    cursor: pointer;
    text-align: center;
  }
  .realMonitor-control {
    &-right {
      .right-list {
        .right-list-template {
          p {
            &:nth-child(1) {
              width: 7%;
              padding-left: 0.2rem;
            }
            &:nth-child(2) {
              width: 15%;
            }
            &:nth-child(4),
            &:nth-child(5),
            &:nth-child(3) {
              width: 10%;
            }
            &:nth-child(6) {
              width: 12%;
            }
            text-align: left;
            padding: 0.1rem;
          }
          display: flex;
          align-items: center;
          font-size: 0.12rem;

          // justify-content: space-around;
        }
        .right-list-table {
          p {
            &:nth-child(1) {
              width: 8%;
            }
            &:nth-child(2) {
              width: 15%;
            }
            &:nth-child(3) {
              width: 9%;
            }
            &:nth-child(4) {
              width: 10%;
            }
            &:nth-child(5) {
              width: 10%;
            }
            &:nth-child(6) {
              width: 14%;
            }
            &:nth-child(7) {
              width: 10%;
            }
            padding: 0.1rem;
            text-align: left;
            font-weight: bold;
          }
          display: flex;
          padding: 0.1rem 0.05rem;
          font-size: 0.12rem;
          // justify-content: space-around;
          background: #f0f9ff;
          border: 1px solid #e7e7e7;
        }
        height: 78vh;
        overflow-y: scroll;
      }
      .right-top {
        text-align: left;
        padding: 0.1rem;
        font-weight: bold;
      }
      width: 79%;
      margin-left: 1%;
      background: #fff;
    }
    &-left {
      .left-list {
        p{
          text-align: left;
        }
        &-template {
          p {
            &:nth-child(1) {
              &::before {
                left: 0;
                top: 0.02rem;
                content: "";
                position: absolute;
                border-radius: 50%;
                width: 0.12rem;
                height: 0.12rem;
                background: #00dc63;
              }
              padding-left: 0.2rem;
              position: relative;
            }
          }
          padding: 0.15rem 0.15rem 0 0.15rem;
          &:last-child {
            padding-bottom: 0.15rem;
          }
        }
        // text-align: left;
        font-size: 0.12rem;
        margin-top: 0.05rem;
        background: #fff;
        margin-bottom: 0.2rem;
        padding-bottom: 0.2rem;
        height: 78vh;
        overflow-y: scroll;
      }
      .left-top {
        p {
          &:nth-child(1) {
            font-size: 0.16rem;
            font-weight: bold;
          }
          &:nth-child(2) {
            margin-left: auto;
            color: #666;
            font-size: 0.12rem;
            margin-right: 0.5rem;
          }
          &:nth-child(3) {
            color: #666;
            font-size: 0.12rem;
          }
          margin-right: 0.1rem;
        }
        align-items: flex-end;
        display: flex;
        background: #fff;
        padding: 0.1rem;
      }
      width: 20%;
    }
    display: flex;
    padding: 0.1rem;
    background: #f5f5f5;
  }
  .realMonitor-map {
    #container {
      height: 90vh;
    }
    width: 100%;
  }
  .realMonitor-list {
    display: flex;

    .realMoniter-left {
      .left-proce {
        &-list {
          .detail-template {
            &-info {
              text-align: left;
              font-size: 0.12rem;
              white-space: nowrap;
              margin-top: 0.1rem;
              color: #656565;
            }
            img {
              margin-top: 0.1rem;
              width: 0.4rem;
              height: 0.32rem;
              margin-right: 0.2rem;
            }
            display: flex;
            padding: 0.1rem;
            background: #fff;
            margin-left: 0.1rem;
            margin-top: 0.1rem;
          }
          display: flex;
          overflow-x: scroll;
        }
        &-allData {
          &-data {
            div {
              p {
                &:nth-child(1) {
                  color: #999;
                  font-size: 0.1rem;
                }
                &:nth-child(2) {
                  font-size: 0.2rem;
                }
              }
              margin-right: 0.1rem;
              white-space: nowrap;
            }
            display: flex;
            margin: 0.1rem 0;
          }
          p {
            &:nth-child(1) {
              span {
                &:nth-child(1) {
                  color: #000;
                }
                &:nth-child(2) {
                  color: #0069b3;
                  margin-left: 0.1rem;
                  font-size: 0.1rem;
                }
              }
            }

            font-size: 0.1rem;
            text-align: left;
          }
          text-align: center;
          padding: 0.1rem;
        }
        display: flex;
        background: #f5f5f5;
        border-top: #fff solid 0.1rem;
      }
      .left-data {
        .choosed {
          // border: solid #0089eb 1px;
          box-shadow: 3px 3px 5px #888888;
        }
        &-template {
          &-carNum,
          &-total,
          &-deviceNum,
          &-stoke {
            p {
              &:nth-child(1) {
                font-size: 0.12rem;
                color: #999;
              }
              &:nth-child(2) {
                font-size: 0.3rem;
                color: #000;
                font-weight: bold;
              }
            }
            margin-left: 0.4rem;
          }
          &-stoke {
            margin-left: auto;
          }
          &-info {
            p {
              &:nth-child(1) {
                span {
                  &:nth-child(1) {
                    font-weight: bold;
                    margin-right: 0.1rem;
                  }
                  &:nth-child(2) {
                    color: #0069b3;
                  }
                }
              }
            }
            color: #656565;
            font-size: 0.12rem;
            text-align: left;
            margin-left: 0.2rem;
          }
          &-headImg {
            background: #999;
            border-radius: 50%;
            width: 0.2rem;
            height: 0.2rem;
            padding: 0.1rem;
            margin-top: 0.1rem;
          }
          display: flex;
          border-top: #f5f5f5 0.04rem solid;
          margin-top: 0.1rem;
          margin-bottom: 0.1rem;
          padding: 0.2rem;
        }
      }
      .left-top {
        text-align: left;
        font-size: 0.14rem;
        font-weight: bold;
      }
      margin: 0.2rem;
      width: 65%;
      height: 20%;
    }
    .realMoniter-right {
      .right-bottom {
        &-template {
          p {
            &:nth-child(1) {
              position: relative;
              padding-left: 0.2rem;
              font-size: 0.14rem;
              font-weight: bold;
              color: #000;
              &::before {
                left: -0.15rem;
                top: 0.03rem;
                position: absolute;
                width: 0.12rem;
                height: 0.12rem;
                background: #ff0000;
                border-radius: 50%;
                content: "";
              }
            }
          }
          text-align: left;
          padding: 0.2rem;
          font-size: 0.12rem;
          color: #666666;
          cursor: pointer;
          background: #fff;
          border-bottom: solid #f5f5f5 0.01rem;
        }
        overflow-y: scroll;
        height: 80vh;
        background: #f5f5f5;
      }
      .right-top {
        margin: 0.2rem;
        margin-bottom: 0;
        span {
          &:nth-child(1) {
            font-weight: bold;
          }
          &:nth-child(2) {
            margin-left: auto;
            margin-right: 0.2rem;
          }
          font-size: 0.14rem;
        }
        text-align: left;
        display: flex;
        border-bottom: solid #f5f5f5 0.04rem;
        padding-bottom: 0.1rem;
      }
      width: 35%;
      border-left: solid #f5f5f5 0.08rem;
    }
  }
  .realMoniter-bottom {
    &-template {
      &::before {
        position: absolute;
        content: "";
        top: 0;
        width: 100%;
        height: 0.02rem;
        background: #006ab4;
      }

      position: relative;
    }
    div {
      margin-right: 0.2rem;
      padding: 0.1rem 0;
    }
    display: flex;
    background: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    text-align: left;
    padding: 0rem 0.2rem;
    border-top: solid #f5f5f5 0.2rem;
  }
  .isChoose {
    color: #0089eb;
  }
  background: #fff;
}
</style>

